<template>
    <cell title="附件列表" style="text-align:left;"  @click.native="openFile" :disabled="disabledVal">
        <input type="file" @change="fileChange()" style="display: none" ref="file" multiple="multiple">
        <div v-for="(item, index) in filesVal" class="img-list">
            <img class="previewer-demo-img" :src="item.src" width="100" @click="show(index)">
            <br/>
            <span @click="remove(index)" v-if="!disabledVal">删除</span>
        </div>

        <div class="img-list" v-if="!disabledVal">
            <x-icon type="plus" style="height:60px;width:60px;" @click.native="openFile"></x-icon>
            <span>上传图片</span>
        </div>

        <div v-transfer-dom>
            <previewer :list="filesVal" ref="previewer" :options="options"></previewer>
        </div>
    </cell>

</template>

<script>
    import { Group, Cell, Previewer, TransferDom, Icon } from 'vux'
    import { mapState } from 'vuex'
    import Layout from './Layout.vue'
    import { repair as api, user as userApi, file as fileApi } from '../api'
    import _ from 'lodash'

    export default {
        directives: {
            TransferDom
        },
        components: {
            Group,
            Cell,
            Previewer,
            Icon
        },
        props: ['files', 'disabled','test'],
        data() {
            return {
                filesVal: JSON.parse( this.files) || [],
                disabledVal: this.disabled || false,
                options: {
                    getThumbBoundsFn(index) {
                        // find thumbnail element
                        let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
                        // get window scroll Y
                        let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                        // optionally get horizontal scroll
                        // get position of element relative to viewport
                        let rect = thumbnail.getBoundingClientRect()
                        // w = width
                        return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }
                        // Good guide on how to get element coordinates:
                        // http://javascript.info/tutorial/coordinates
                    }
                }
            }
        },
        watch: {
            files(val, oldVal) {
                console.log('files', this.disabled)
                this.disabledVal = this.disabled
                this.filesVal = JSON.parse(val || '[]')
            },
            disabled(val, oldVal){
                console.log('disabled', this.val, this.oldVal)
                this.disabledVal = val
            },
        },
        methods: {
            openFile() {
                console.log('fff', this.disabledVal)
                if(this.disabledVal) return
                this.$refs.file.click();
            },
            clearInputFile(f) {
                if (f.value) {
                    try {
                        f.value = ''; //for IE11, latest Chrome/Firefox/Opera...  
                    } catch (err) {
                    }
                    if (f.value) { //for IE5 ~ IE10  
                        var form = document.createElement('form'), ref = f.nextSibling, p = f.parentNode;
                        form.appendChild(f);
                        form.reset();
                        p.insertBefore(f, ref);
                    }
                }
            },
            async fileChange() {
                var img = this.$refs.file.files[0];

                // 判断是否图片  
                if (!img) {
                    return;
                }

            
                // 判断图片格式  
                if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/i.test(img.name))) {
                    alert(img.name+'图片只能是jpg,gif,png');
                    return;
                }

                let ret = await fileApi.upload(img)

                if (!ret.success) {
                    this.$vux.toast.show(`图片上传失败！`)
                    return
                }

                this.filesVal.push({ src: ret.data })

                this.clearInputFile(this.$refs.file)

                this.$emit('update:files', JSON.stringify(this.filesVal))
            },
            show(index) {
                this.$refs.previewer.show(index)
            },
            remove(index) {
                this.filesVal.splice(index, 1)
            },
        },
    }

</script>

<style scoped>
    .previewer-demo-img {
        margin-left: 10px;
    }

    .title {
        color: #999999;
    }

    .img-list {
        display: block;
        float: left;
        text-align: left;
    }

    .img-list img {
        height: 60px;
    }

    .img-list span {
        display: block;
        font-size: 12px;
        text-align: center;
    }

</style>